<template>
  <div id="dialogIntegralActionEdit">
    <el-dialog
      :title="isAdd ? '新增' : '编辑'"
      :visible.sync="dialogData.isShow"
      width="850px"
      top="50px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="90px"
        >
          <el-form-item label="优惠券图标" prop="couponIcon">
            <uploadSingImg
              width="10px"
              height="10px"
              :imgUrl="ruleForm.couponIcon"
              accept=".jpg,.jpeg,.png,.gif"
              :maxSize="5"
              @getImgUrl="getImgCover"
            >
              <template v-slot:imgInfo
                >（建议尺寸：88*88，图片大小不超过 500kb，支持
                jpg、jpeg、png、gif 格式）</template
              >
            </uploadSingImg>
          </el-form-item>
          <el-form-item
            class="form-box__pingdao"
            label="频道号"
            prop="liveRoomNumber"
            label-width="90px"
          >
            <el-input
              v-model="ruleForm.liveRoomNumber"
              value-key="id"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请输入频道号"
            >
            </el-input>
          </el-form-item>
          <!--关联优惠券-->
          <el-form-item label="关联优惠券" prop="couponId">
            <el-select
              v-model="ruleForm.couponId"
              multiple
              filterable
              default-first-option
              @change="bindChange"
              placeholder="请选择优惠券"
              no-match-text="无搜索项,重新搜索"
            >
              <el-option
                v-for="item in couponNameList"
                :key="item.id"
                :label="item.couponName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转链接" prop="jumpLink">
            <el-input v-model="ruleForm.jumpLink"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单部分 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import dialogUploadImg from '@component/readManagement/readMine/dialogUploadImg' // 上传图片组件
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import {
  getCampClassLives,
  addCampClass,
  getCampClassDetail,
  eidtCampClass
} from '@/api/couponsIntegral/campClass' // 接口
export default {
  msg: '营课优惠券配置-编辑弹窗',
  props: ['dialogData'],
  components: {
    uploadSingImg
  },
  data() {
    return {
      loading: false,
      isAdd: true, //默认新增
      couponNameList: [], //直播优惠券列表
      ruleForm: {
        couponIcon: '', //优惠券图标
        couponName: '', // 优惠券名称
        couponId: [], //关联优惠券id(这里最多是三个)
        jumpLink: '', //跳转链接
        liveRoomNumber: '' //已经写入关联直播间id
      },
      rules: {
        couponIcon: {
          required: true,
          message: '优惠券图标不能为空',
          trigger: 'blur'
        },
        liveRoomNumber: {
          required: true,
          message: '频道号不能为空',
          trigger: 'blur'
        },
        couponId: {
          required: true,
          message: '优惠券名称不能为空',
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  mounted() {
    //通过任务类型，判断展示组件
    if (this.dialogData.params.id) {
      //编辑
      this.isAdd = false
      //调用获取优惠券配置详情方法
      this.getformDetail()
    } else {
      this.isAdd = true
    }
    this.getCouponNameList()
    //默认上传优惠券图标图片
    this.ruleForm.couponIcon =
      'https://image.dapengjiaoyu.com/default/coupon.png'
  },
  methods: {
    // 活动封面
    getImgCover(url) {
      this.ruleForm.couponIcon = url
    },
    /*查询直播优惠券列表*/
    getCouponNameList() {
      //根据id，获取商品列表
      getCampClassLives(
        (response) => {
          this.couponNameList = [...response]
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*选中优惠券数量不能大于三个 */
    bindChange(e) {
      if (e.length > 3) {
        this.$message.warning('最多选择三张优惠券（必选）')
        this.ruleForm.couponId.splice(3)
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.params = {}
    },
    /*数据回填*/
    setSysObj(res) {
      let { couponIcon, couponIds, jumpLink, liveRoomNumber } = res
      // 如果优惠券id存在就调用获取营课优惠券配置详情
      if (couponIds && couponIds.length > 0) {
        this.getCouponNameList()
      }
      this.ruleForm = {
        couponIcon,
        jumpLink,
        liveRoomNumber,
        couponId: couponIds
      }
    },
    /*营课优惠券配置详情*/
    getformDetail() {
      let id = this.dialogData.params.id
      getCampClassDetail(
        id,
        (response) => {
          this.setSysObj(response)
          this.loading = flase
        },
        (response) => {
          this.errCallBack(response)
          this.loading = flase
        }
      )
    },
    /*编辑时-获取提交参数*/
    getEditObj() {
      let { couponIcon, couponId, jumpLink, liveRoomNumber } = this.ruleForm
      let obj = { couponIcon, couponId, jumpLink, liveRoomNumber }
      return obj
    },
    /*新增时-获取提交参数*/
    getAddObj() {
      let { couponIcon, couponId, jumpLink, liveRoomNumber } = this.ruleForm
      let obj = { couponIcon, couponId, jumpLink, liveRoomNumber }
      return obj
    },
    /* 确认提交 */
    async confirmLabel(formName) {
      let obj = {}
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.isAdd) {
              //新增
              let obj = this.getAddObj()
              addCampClass(
                obj,
                (response) => {
                  this.sucCallBack()
                  this.loading = flase
                },
                (response) => {
                  this.errCallBack(response)
                  this.loading = flase
                }
              )
            } else {
              //编辑
              let obj = this.getEditObj()
              this.loading = true
              eidtCampClass(
                this.dialogData.params.id,
                obj,
                (response) => {
                  this.$message.success('操作成功！')
                  this.sucCallBack()
                },
                (response) => {
                  this.errCallBack(response)
                }
              )
            }
          } else {
            return false
          }
        })
      })
    },
    sucCallBack() {
      this.$emit('refresh')
      this.cancelLabel()
      this.loading = false
    },
    errCallBack(response) {
      this.loading = false
      this.$message({
        message: '编辑失败，' + response.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="less">
#dialogIntegralActionEdit {
  .margin0 {
    margin-bottom: 0 !important;
  }
  .form-title {
    font-weight: bold;
    font-size: 16px;
    padding-top: 5px;
  }
  .small {
    .el-input-number--mini {
      width: 70px;
      margin: 0 5px;
      .el-input__inner {
        padding-left: 5px;
        padding-right: 5px !important;
      }
    }
  }
  .el-form-item.line {
    display: inline-block;
    margin-bottom: 0;
  }
  .el-range-separator {
    box-sizing: content-box;
  }
  .el-range-editor--mini {
    height: 28px !important;
  }
  span.tips {
    color: #f00;
  }
  .full-input .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      font-size: 14px;
    }
  }

  .reduction {
    width: 170px;
  }
  .form-box {
    display: flex;
    flex-direction: column;
  }
}
</style>
